選擇 Template

當使用 CRA 建立專案時，加上 --template [template-name] 就可以指定要建立的專案模版。

npx create-react-app my-app --template [template-name]

預設提供的 Template

如果沒有指定，CRA 會使用預設的基本版型。

放置在 create-react-app/packages/cra-template/

npx create-react-app my-app

CRA 內建也預設了 TypeScript 的版型

放置在 create-react-app/packages/cra-template-typescript/

要建立 Typescript 的 React 專案就是用 --template typescript

npx create-react-app my-app --template typescript

NPM 上 Community 提供的 Templates

使用 cra-template-* 做 NPM Search，就會找到很多可用的 Community Templates

https://www.npmjs.com/search?q=cra-template-*

也可以發現，若要建立別人可共用的 Template Package，命名必需為 cra-template-*

建立客製化的 Templates

首先 Template Package 必須是以下結構

cra-template-[template-name]/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

/template 目錄

這個目錄下的檔案會被複製到整個專案目錄底下

template.json 檔案

此檔案為客製化 Templates 的設定配置檔案，

下面的範例是可讓專案的JSX要有無障礙(a11y)設置的ESLint，以及使用serve套件運行及建置專案

{
  "package": {
    "dependencies": {
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "serve": "^11.2.0"
    },
    "scripts": {
      "serve": "serve -s build",
      "build-and-serve": "npm run build && npm run serve"
    },
    "eslintConfig": {
      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
      "plugins": ["jsx-a11y"]
    }
  }
}

你的設定值會與CRA原始的設定值做Merge，如果相同KEY值就會被覆蓋

建立好的 Template，若要分享給大家使用，就可以推上 npm package

實際演練使用 Community Templates

當希望專案建置時預設就把 Tailwind 及 Typescript 都配置好

我們可以使用這個套件 cra-template-tailwindcss-typescript

npx create-react-app react-ts-tailwind-app --template tailwindcss-typescript

建立完成後，打開新建的專案與 tailwindcss-typescript的/template 比對

會發現 /template 的檔案都會被 CLONE 至專案底下

就不需要自己安裝 Tailwind Package 及 增加 tailwind.config.js

在指定 --template 時就一併在CRA建置專案時完成所有相關的設定

接下來使用 npm start 運行新建立的專案

Tailwind 已經可以開始在專案中使用囉！

Next

專案的初始架構已成型，接下來會開始介紹 Function Component 及 React Hooks。

這邊不會介紹太入門的基本概念，而是把重點放在 React Hooks 的設計觀念。

Reference

https://create-react-app.dev/docs/getting-started#selecting-a-template

https://create-react-app.dev/docs/custom-templates

https://www.jianshu.com/p/0803ceaad50b

https://alexgrischuk.medium.com/how-to-create-custom-create-react-app-cra-templates-73a5196edeb